<template>
    <img :src="musicList.al.picUrl" alt="" class="bgimg">
    <div class="detailTop">
        <div class="detailTopLeft">
            <svg class="icon" aria-hidden="true" @click="backHome">
                    <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <div class="leftMarquee">
                <Vue3Marquee style="color:#fff">
                    {{musicList.name}}
                </Vue3Marquee>
                <span v-for="item in musicList.ar" :key="item">{{item.name}}</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </div>
        </div>
        <div class="detailTopRight">
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-iconfontfenxiang"></use>
            </svg>
        </div>
    </div>
    <div class="detailContent" v-show="!isLyricShow"  @click="isLyricShow=true">
        <img src="@/assets/needle-ab.png" alt="" class="img_needle" :class="{img_needle_active:!isbtnShow}">
        <img src="@/assets/cd.png" alt="" class="img_cd">
        <img :src="musicList.al.picUrl" alt="" class="img_al" :class="{ img_al_active:!isbtnShow, img_al_paused:isbtnShow}">
    </div>
    <div class="musicLyric" ref="musicLyric" v-show="isLyricShow">
        <p v-for="item in lyric" :key="item" :class="{active:(currentTime*1000>=item.time && currentTime*1000<item.pre)}">
            {{item.lrc}}
        </p>
    </div>
    <div class="detailFooter">
        <div class="footerTop">
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-aixin"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-changpian"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-message"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao-"></use>
            </svg>
        </div>
        <!-- 进度条 -->
        <div class="footerContent">
            <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05">
        </div>
        <!-- 底部播放 -->
        <div class="footer">
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xunhuan"></use>
            </svg>
            <svg class="icon" aria-hidden="true"  @click="goPlay(-1)">
                    <use xlink:href="#icon-shangyishoushangyige"></use>
            </svg>
            <svg class="icon icon-paly" aria-hidden="true" v-if="isbtnShow" @click="play">
                    <use xlink:href="#icon-bofang"></use>
            </svg>
            <svg class="icon icon-paly" aria-hidden="true" v-else @click="play">
                    <use xlink:href="#icon-zanting"></use>
            </svg>
            <svg class="icon" aria-hidden="true" @click="goPlay(1)">
                    <use xlink:href="#icon-xiayigexiayishou"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zu"></use>
            </svg>
        </div>
    </div>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { mapMutations } from 'vuex'
import {mapState} from 'vuex'
export default {
    data(){
        isLyricShow:false
    },
    computed:{
        ...mapState(["lyricList","currentTime","playListIndex","playList","duration"]),
        // 获取歌词
        lyric:function(){
            let arr
            if(this.lyricList.lyric){
                arr=this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item,i)=>{
                    let min=item.slice(1,3) //获取分钟
                    let sec=item.slice(4,6) //获取秒
                    let mill=item.slice(7,10) //获取毫秒
                    let lrc=item.slice(11,item.length) //获取歌词
                    let time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill)  //计算当前总时间
                    // console.log(min,sec,mill,lrc)
                    if(isNaN(mill)){
                        mill=item.slice(7,9)
                        lrc=item.slice(10,item.length)
                        time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill)
                    }
                    return {min,sec,mill,lrc,time}
                })
                arr.forEach((item,i)=>{
                    if (i===arr.length-1 || isNaN(arr[i+1].time)) {
                        item.pre=100000 //播放到最后一句，时间设置为0
                    }else{
                        item.pre=arr[i+1].time
                    }
                })
            }
            return arr
        }
    },
    mounted(){
        // console.log(this.musicList)
        this.addDuration()
    },
    props:['musicList','isbtnShow','play','addDuration'],
    methods:{
        backHome:function(){
            this.updateDetailShow()
            this.isLyricShow=false
        },
        // 控制上下首播放，让当前索引和传进去的索引相加，-1的刚好是上一首，1的刚好是下一首
        goPlay(num){
            let index=this.playListIndex+num
            if (index<0) {
                index=this.playList.length-1
            }else if(index===this.playList.length){
                index=0
            }
            this.updatePlayListIndex(index)
        },
        ...mapMutations(['updateDetailShow','updatePlayListIndex'])
    },
    watch:{
        // 当前时间变化时获取歌词当前的offsetTop
        currentTime:function(newValue){
            let p=document.querySelector("p.active")
            // console.log([p])
            if(p && p.offsetTop && p.offsetTop>300){
                // 当歌词播放到离顶部300时，歌词页面滚动条向上滚动offsetTop-300
                    this.$refs.musicLyric.scrollTop=p.offsetTop-300
            }else{
                return
            }
            // 监视当前的事件是否和总时长相等，是的话自动切换下一首
            if (newValue===this.duration) {
                // 如果是默认列表，只有一首歌，所以歌曲的长度和索引值都没有变化，所以要重新调用this.play()
                if (this.playListIndex===this.playList.length-1) {
                    this.updatePlayListIndex(0) 
                    this.play()
                }else{
                this.updatePlayListIndex(this.playListIndex+1)  
                }
            }
        }
    },
    components:{
        Vue3Marquee 
    }
}
</script>
<style lang="less" scoped>
    .bgimg{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        filter: blur(1.4rem);
    }
    .detailTop{
        width: 100%;
        height: 1rem;
        display: flex;
        padding: 0.2rem;
        justify-content: space-between;
        align-items: center;
        fill: #fff;
        margin-top: .3rem;
        .detailTopLeft{
            display: flex;
            align-items: center;
            .leftMarquee{
                width: 3rem;
                height: 100%;
                margin-left: 0.4rem;
                span{
                    color: #999;
                    font-size: .2rem;
                }
                .icon{
                    width: 0.3rem;
                    height: 0.3rem;
                    fill: #999;
                }
            }
        }
    }
    .detailContent{
        width: 100%;
        height: 9rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .img_needle{
            width: 2rem;
            height: 3rem;
            position: absolute;
            left: 46%;
            transform-origin: 0 0;
            transform: rotate(-15deg);
            transition: all 2s;
        }
        .img_needle_active{
            width: 2rem;
            height: 3rem;
            position: absolute;
            left: 46%;
            transform-origin: 0 0;
            transform: rotate(0deg);
            transition: all 2s;
        }
        .img_cd{
            width: 5rem;
            height: 5rem;
            position: absolute;
            bottom: 2.3rem;
            z-index: -1;
        }
        .img_al{
            width: 3.2rem;
            height: 3.2rem;
            border-radius: 50%;
            position: absolute;
            bottom: 3.14rem;
            animation: rotate_al 10s linear infinite;//使用动画
        }
        .img_al_active{
            animation-play-state: running;//动画启动
        }
        .img_al_paused{
            animation-play-state: paused;//动画暂停
        }
        @keyframes rotate_al {//定义动画
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(360deg);
            }
        }
    }
    .musicLyric{
        width: 100%;
        height: 8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: .2rem;
        overflow: scroll;
        margin-left: .2rem;
        margin-right: .2rem;
        p{
            color: rgb(197, 184, 184);
            margin-bottom: .3rem;
        }
        .active{
            color:rgb(72, 47, 47); 
            font-size: .5rem;
        }
    }
    .detailFooter{
        width: 100%;
        height: 3rem;
        position: absolute;
        bottom: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .footerTop{
            width: 100%;
            height: 1rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .icon{
                width: .46rem;
                height: .46rem;
                fill: rgb(245, 234, 234);
            }
        }
        .footerContent{
            .range{
                width: 100%;
                height: 0.06rem;
            }
        }
        .footer{
            display: flex;
            justify-content: space-around;
            align-items: center;
            .icon{
                width: .46rem;
                height: .46rem;
                fill: rgb(245, 234, 234);
            }
            .icon-paly{
                width: .66rem;
                height: .66rem;
            }
        }
    }
</style>
